﻿@model GameSchoolApplication.Models.Exam

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Próf</legend>

        @Html.HiddenFor(model => model.examID)
        @Html.HiddenFor(model => model.lvlID)

        <div class="editor-label">
            <label>Titill</label>
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.name)
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            <label>Lýsing</label>
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.exDesc)
            @Html.ValidationMessageFor(model => model.exDesc)
        </div>

        <div class="editor-label">
            <label>Vægi prófs</label>
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.gradeValue)
            @Html.ValidationMessageFor(model => model.gradeValue)
        </div>


    </fieldset>
    <fieldset>
        <!--TODO! RAÐA UPP FALELGA-->
        <div id="questionListArea">
            <!--Btn to add question-->
            <input type="button" id="addQuestion" value="Add question" />
            <!--btn to edit question-->
            <input type="button" id="editQuestion" value="Edit question" />        
        <br />

            <!--Question list-->
            <select id="questionSelect" multiple="multiple">
            
            </select>
        </div>        
        <div id="selectedQuestionDisplay">
            
        </div>
        <div id="optionDisplay">
            <input type="text" id="newOption" value="" />
            <input type="button" id="addOption" value="+" />
            <br />
            <!--Listar út svarmöguleikum fyrir spurningu.-->
            <select id="optionList" multiple="multiple">
                <!--TODO: hlaða inn options-->
            </select>
        </div>   
    </fieldset>

    <fieldset>
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
<!--jQuery templates-->
<script id="questionListItemTemplate" type="text/html">
    <option class="questionListItem" value="${qID}">${qNumber}:${qText}</option>
</script>
<script id="questionTemplate" type="text/html">
    <form action="editQuestion">
        <input type="hidden" id="qID" value="${qID}" />
        <input type="text" name="qNumber" value="${qNumber}" /><br />
        <input type="text" name="qText" value="${qText}" /><br />
        <input type="button" id="addOption" value="Add option" /><br />
    </form>
</script>
<script id="optionListItemTemplate" type="text/html">
    <option class="questionListItem" value="${optionNo}">${optionValue}</option>
</script>

<script id="newQuestiontemplate" type="text/html">
    <fieldset class="newQuestion">
        <input type="text" name="qNumber" value="${qNumber}" /><br />
        <input type="text" name="qText" value="${qText}" /><br />
        <input type="button" id="addOption" value="Add option" /><br />

    </fieldset>
</script>

<!--AJAX-->
<script type="text/javascript">
//Hleður inn spurningalistanum fyrir prófið...
    function loadQuestionList() {
        var exID = $("#examID").val();
        var param = { examID: exID }
        $.getJSON("getExamQuestionList", param, function (data) {
            $("#questionListItemTemplate").tmpl(data).appendTo("#questionSelect");
        });
    }
    //sýnir detailaðar upplýsingar um spurningar
    function displayQuestion() {
        $("div#selectedQuestionDisplay").empty();
        var questionID = $("select#questionSelect").val();
        var param = { questionID: questionID }
        $.getJSON("getQuestionInfo", param, function (data) {
            $("#questionTemplate").tmpl(data).appendTo("#selectedQuestionDisplay");
        });
    }
    
    //hleður inn event handlers.. þetta fall er keyrt í document ready.
    function loadExamEventHandlers() {
        loadQuestionList();
        $("select#questionSelect").change(function () {
            $("div#selectedQuestionDisplay").empty();
            $("#optionList").empty();
            var questionID = $("select#questionSelect option:selected").val()
            var param = { questionID: questionID }
            $.getJSON("getQuestionInfo", param, function (data) {
                $("#questionTemplate").tmpl(data).appendTo("#selectedQuestionDisplay");
            });
            $.getJSON("getOptionsForQuestion", param, function (data) {
                $("#optionListItemTemplate").tmpl(data).appendTo("#optionList");
            });
            $("select#optionList")
        });
        //addQuestion takki click event
        $("#addQuestion").click(function () {
            var examID = $("#examID").val();
            var param = { examID: examID }
            window.location.href = "addQuestion?examID=" + examID;
        });
        //add option takki í question viewinu
        $("#addOption").live("click", function () {
            var questionID = $("#qID").val();
            var optionValue = $("#newOption").val();
            if (optionValue != "") {
                var param = { questionID: questionID, optionValue: optionValue }
                $.getJSON("addQuestionOption", param, function (data) {
                    $("#optionListItemTemplate").tmpl(data).appendTo("#optionList");
                });
                $("#newOption").val("");
            }
        });
        //edit question takki
        $("#editQuestion").click(function () {
            var questionID = $("select#questionSelect option:selected").val()
            var param = { questionID: questionID }
            window.location.href = "editQuestion?questionID=" + questionID;
        });
    }    
</script>